<template>
  <el-aside :width="isCollapse ? '64px' : '200px'">
    <div class="logo">
      <img src="~@/assets/logo.png" alt="" />
      <span>校园兼职</span>
    </div>
    <el-menu
      background-color="#333333"
      text-color="#ffffff"
      active-text-color="#03a0d4"
      style="border: 0px"
      :default-active="active"
      :collapse="isCollapse"
      router
    >
      <el-menu-item
        :index="item.href"
        v-for="(item, index) in menus"
        :key="index"
        @click="handleMenuItem(item)"
      >
        <i :class="item.icon" style="margin-right: 1vw"></i>
        <span slot="title">{{ item.name }} </span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: "SideBar",
  props: ["isCollapse"],
  data() {
    return {
      menus: [],
      active: "", //默认选中
    };
  },
  methods: {
    handleMenuItem(item) {
      this.$emit("handleMenuItem", item);
    },
  },
  created() {
    this.$store
      .dispatch("getMenus")
      .then((res) => {
        if (res) {
          this.menus = res.obj;
          console.log(this.menus, "导航栏的菜单");
          let selectMenu; //选中的菜单
          if (this.$route.path) {
            this.active = this.$route.name;
            selectMenu = this.menus.filter((v) => v.href == this.active)[0];
          } else {
            this.active = this.menus[0].href;
            selectMenu = this.menus[0];
          }
          this.handleMenuItem(selectMenu);
        }
      })
      .catch(() => {});
  },
};
</script>
<style scoped>
.el-aside {
  background-color: #333333;
  color: aliceblue;
  min-height: 100vh;
  /* 动画 */
  transition: all 0.5s;
}
.logo {
  height: 60px;
  width: 200px;
  line-height: 60px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding-left: 60px;
}
.logo img {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 10px;
  top: 10px;
}
.logo > span {
  padding-left: 4px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
</style>
